<template>
    <div>
        <el-descriptions
            :column="1"
            size="medium"
            border
            :labelStyle="{ 'white-space': 'nowrap' }"
        >
            <el-descriptions-item label="请求地址">{{
                row.url
            }}</el-descriptions-item>
            <el-descriptions-item label="请求参数">{{
                row.data
            }}</el-descriptions-item>
            <el-descriptions-item label="设备信息">{{
                row.useragent
            }}</el-descriptions-item>
        </el-descriptions>
        <el-row type="flex" justify="center" style="margin-top:30px">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >完成({{ current + 1 }}/{{ selection.length }})</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </div>
</template>

<script>
export default {
    name: "admin-log-detail",
    props: {
        selection: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        row() {
            return this.selection[this.current] || {};
        }
    },
    data() {
        return {
            current: 0
        };
    },
    methods: {
        onConfirm() {
            if (this.current === this.selection.length - 1) {
                this.current = 0;
                this.$parent.$emit("update:visible", false);
            } else {
                this.current += 1;
            }
        },
        onCancel() {
            this.current = 0;
            this.$parent.$emit("update:visible", false);
        }
    }
};
</script>